<template>
  <div class="xuexiluxianitme">
<div v-for="(v,i) in data" :key="i">
    <div>
        <img :src=v.imgurl>
    </div>
    <div>
        <p>{{v.title}}</p>
        <p>{{v.texttitle}}</p>
        <p> <span>{{v.buzhou}}步骤 · {{v.kechengshu}}</span> <span>{{v.shoucang}}人收藏</span></p>
    </div>
</div>
  </div>
</template>

<script>
export default {
props:["data"]
}
</script>

<style scoped>

.xuexiluxianitme>div{
    display: flex;
    justify-content: center;
    margin: .2rem auto;
}
.xuexiluxianitme>div>div:nth-child(1){
width: 0.83rem;
height: 0.83rem;

}
.xuexiluxianitme>div>div:nth-child(1)>img{
width: 100%;
height: 100%;
}
.xuexiluxianitme>div>div:nth-child(2){
    width: 2.15rem;
    margin-left: .1rem;
}
.xuexiluxianitme>div>div:nth-child(2)>p:nth-child(1){
font-weight: bold;
}
.xuexiluxianitme>div>div:nth-child(2)>p:nth-child(2){
    font-size: .1rem;
    color: #4d4d4d;
}
.xuexiluxianitme>div>div:nth-child(2)>p:nth-child(3){
    font-size: .1rem;
    color: #4d4d4d;
    display: flex;
    justify-content: space-between;
    margin-top: .1rem;
}
</style>